import React, {Component} from "react";
import {InfoContainer, Item, ItemContainer, TitleContainer} from '../style';
import {connect} from "react-redux";
import {queryState, RandomStr} from "@/util/global";
import {Col, Row, Table, Tooltip} from "antd";
import moment from 'moment';
import {getPurchaseList} from "@/api/SysStationOrder";
import {userGamePurchased} from "@/js/columns";
import {LightBackgroundColor} from "@/style/Color";

class PersonalData extends Component {
    constructor(props) {
        super(props);
        this.loadPurchaseList = this.loadPurchaseList.bind(this);
        this.handleOnChange = this.handleOnChange.bind(this);
        this.state = {
            /* 已购项目 */
            PurchaseList: [],
            PurchaseColumns: userGamePurchased(),
            page: 1,
            size: 10,
            total: 0,
            tableLoading: false,
        }
    }

    componentDidMount() {
        this.loadPurchaseList()
    }

    loadPurchaseList() {
        let params = {
            page: this.state.page,
            size: this.state.size
        }
        this.setState({tableLoading: true})
        getPurchaseList(params).then(res => {
            if (res.success) {
                this.setState({
                    PurchaseList: res.data.rows,
                    total: res.data.total,
                    page: res.data.page,
                    size: res.data.size,
                    tableLoading: false
                })
            }
        })
    }

    /* 分页器事件 */
    handleOnChange(page, size) {
        this.setState({page, size}, this.loadPurchaseList)
    }

    render() {
        function getStatusText(id) {
            let status = queryState('sysStatus.statusList');
            if (status.length > 0) {
                for (let i in status) {
                    if (status[i]['statusId'] === parseInt(id)) {
                        return status[i]['statusName'];
                    }
                }
            }
        }

        const {user} = this.props
        return (
            <>
                <Row gutter={[16, 16]}>
                    <Col span={8}>
                        <ItemContainer>
                            <TitleContainer>
                                <h3>基本信息</h3>
                            </TitleContainer>
                            <InfoContainer>
                                <Item index={1} key={1}>
                                    <span className={'info-title'} key={RandomStr()}>用户编号</span>
                                    <span className={'info-content'} key={RandomStr()}>{user.userid}</span>
                                </Item>
                                <Item index={2} key={2}>
                                    <span className={'info-title'} key={RandomStr()}>用户账号</span>
                                    <span className={'info-content'} key={RandomStr()}>{user.uname}</span>
                                </Item>
                                <Item index={3} key={3}>
                                    <span className={'info-title'} key={RandomStr()}>性别</span>
                                    <span className={'info-content'} key={RandomStr()}>{user.sex}</span>
                                </Item>
                                <Item index={4} key={4}>
                                    <span className={'info-title'} key={RandomStr()}>创建日期</span>
                                    <span className={'info-content'} key={RandomStr()}>{user.createDate}</span>
                                </Item>
                                <Item index={5} key={5}>
                                    <span className={'info-title'} key={RandomStr()}>手机</span>
                                    <span className={'info-content'} key={RandomStr()}>{user.phone}</span>
                                </Item>
                                <Item index={6} key={6}>
                                    <span className={'info-title'} key={RandomStr()}>电子邮箱</span>
                                    <span className={'info-content'} key={RandomStr()}>{user.email}</span>
                                </Item>
                                <Item index={7} key={7}>
                                    <span className={'info-title'} key={RandomStr()}>JCoins</span>
                                    <span className={'info-content'} key={RandomStr()}>{user.jcoins} 枚</span>
                                </Item>
                            </InfoContainer>
                            <TitleContainer>
                                <h3>社交信息</h3>
                            </TitleContainer>
                            <InfoContainer>
                                <Item index={8} key={8}>
                                    <span className={'info-title'} key={RandomStr()}>编号</span>
                                    <span className={'info-content'} key={RandomStr()}>{user.onlineId}</span>
                                </Item>
                                <Item index={9} key={9}>
                                    <span className={'info-title'} key={RandomStr()}>昵称</span>
                                    <span className={'info-content'} key={RandomStr()}>{user.onlineName}</span>
                                </Item>
                                <Item index={10} key={10}>
                                    <span className={'info-title'} key={RandomStr()}>积分</span>
                                    <span className={'info-content'} key={RandomStr()}>{user.onlineIntegral}</span>
                                </Item>
                                <Item index={11} key={11}>
                                    <span className={'info-title'} key={RandomStr()}>简介</span>
                                    <span className={'info-content'}
                                          key={RandomStr()}>
                                        {
                                            !user.onlineText || user.onlineText.length === 0 ?
                                                <span className={'isNull'} key={RandomStr()}>暂无</span>
                                                :
                                                user.onlineText.length > 24 ?
                                                    <Tooltip title={<span style={{
                                                        color: "#888",
                                                        fontSize: '12px'
                                                    }}>{user.onlineText}</span>}
                                                             color={"white"}>
                                                        {user.onlineText.substring(0, 24) + '...'}
                                                    </Tooltip>
                                                    :
                                                    user.onlineText
                                        }</span>
                                </Item>
                            </InfoContainer>
                            <TitleContainer>
                                <h3>更多信息</h3>
                            </TitleContainer>
                            <InfoContainer>
                                <Item index={12} key={12}>
                                    <span className={'info-title'}>用户状态</span>
                                    <span className={'info-content'}>
                                        {getStatusText(user.statusId)}
                                   </span>
                                </Item>
                                <Item index={13} key={13}>
                                    <span className={'info-title'}>当次登录时间</span>
                                    <span className={'info-content'}>{user.loginTime}</span>
                                </Item>
                                <Item index={14} key={14}>
                                    <span className={'info-title'}>会员到期日期</span>
                                    <span
                                        className={'info-content'}>{moment(user.vipExpireDate).format('yyyy-MM-DD HH:mm:ss')}</span>
                                </Item>
                            </InfoContainer>
                        </ItemContainer>
                    </Col>
                    <Col span={16}>
                        <ItemContainer>
                            <TitleContainer>
                                <h3>游戏购买记录</h3>
                            </TitleContainer>
                            <Table columns={this.state.PurchaseColumns}
                                   dataSource={this.state.PurchaseList}
                                   loading={this.state.tableLoading}
                                   scroll={{x: 450}}
                                   style={{backgroundColor: LightBackgroundColor}}
                                   pagination={{
                                       position: ['none', 'bottomCenter'],
                                       defaultCurrent: 1,
                                       defaultPageSize: 10,
                                       pageSize: this.state.size,
                                       current: this.state.page,
                                       total: this.state.total,
                                       onChange: this.handleOnChange,
                                       size: "small"
                                   }}
                            />
                        </ItemContainer>
                    </Col>
                </Row>
            </>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        user: state.getIn(['user']).toJS()
    }
};

const mapDispatchToProps = (dispatch) => {
    return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(PersonalData);
